<template>
    <div :class="isCollapse?'sidebar collapse':'sidebar'">
        <el-menu
            active-text-color="#409eff"
            background-color="#fff"
            class="el-menu-vertical-demo"
            default-active="1"
            unique-opened
            menu-trigger="click"
            router
            text-color="#333"
            :collapse="isCollapse"
            @open="handleOpen"
            @close="handleClose"
            @select="handleSelect"
        >
            <el-menu-item >
                <template #title>
                    <div class="logoContent">
                        <img src="../assets/logo.jpg" alt="">
                        <span>小说管理系统</span>
                    </div>
                    
                </template>
            </el-menu-item>
            <template v-for="(item,index) in routeList" :key="index">
                <!--无需折叠，不嵌套子菜单-->
                <el-menu-item v-if="!item.children || item.children.length<=0" :index="item.path">{{ item.name }}</el-menu-item>
                <!--需要折叠，需要嵌套子菜单-->
                <el-sub-menu v-if="item.children && item.children.length>0" :index="item.path">
                    <template #title>
                        <el-icon><location /></el-icon>
                        <span>{{ item.name }}</span>
                    </template>
                    <template v-for="(tip,tipIndex) in item.children" :key="tipIndex">
                        <el-menu-item v-if="!tip.children" :index="tip.path">{{ tip.name }}</el-menu-item>
                        <!-- <el-sub-menu index="">
                            <template #title>小说类型</template>
                            <el-menu-item index="">小说类型</el-menu-item>
                        </el-sub-menu> -->
                    </template>
                    
                </el-sub-menu>
            </template>
            
        </el-menu>
    </div>
</template>
<script setup>
import {ref,reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import {queryTree} from '@/utils/index.js'
//el-sub-menu是嵌套子菜单，带有伸缩功能，存在子菜单
//el-menu-item是单纯链接点击，不带有伸缩功能，故不存在子菜单
const isCollapse=ref(false)
let routeList=reactive([
    {
        name:'小说管理',
        path:'/novelManager',
        children:[
            {
                name:'小说查询',
                path:'/novelQuery',
            },
            {
                name:'小说类型',
                path:'/novelType'
            }
        ]
    },
    {
        name:'阅读管理',
        path:'',
        children:[
            {
                name:'人数查询',
                path:'/readNumQuery'
            },
            {
                name:'流量查询',
                path:'/flowPathQuery'
            }
        ]
    },
    {
        name:'配置管理',
        path:'/novelConfig',
    }
])

onMounted(()=>{
    console.log('初始化mounted',isCollapse)
    
})

const handleOpen = (key, keyPath) => {
    console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
    console.log(key, keyPath)
}
const handleSelect=(index,indexPath,item,routeResult)=>{
    console.log('index:',index,'indexPath:',indexPath,'item:',item,'routeResult:',routeResult)
    let arr=[]; //存储点击的路径的name集合
    
    //获取某一个路径对应的name
    let obj=queryTree(routeList,'path',indexPath[0])
    console.log(obj[0].name)
}
//暴露组件实例方法等
defineExpose({
    isCollapse
})

</script>
<style lang="less" scoped>
.sidebar{
    width:200px;
    height:100%;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:#fff;
    
}
.collapse{
    width: 64px !important;
    transition: 0.3s;
}
.logoContent{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    img{
        width:28px;
        margin-right:10px;
    }
}
</style>